<template>
  <!-- 动态页面 -->
  <view>
    <uni-nav-bar statusBar status-bar :border="false" @clickRight="toaddinput">
      <!-- 自定义顶部的内容 -->
      <view class="top">
        <text
          class="font-md"
          v-for="(item, index) in top"
          :key="index"
          :id="'tab' + index"
          :class="
            index === tag ? 'mainColor font-weight font-size font-lg' : ''
          "
          @click="tabClick(index)"
          >{{ item }}</text
        >
      </view>
      <!-- 自定义右侧内容 -->
      <template v-slot:right>
        <text class="iconfont icon-fatie_icon" style="font-size: 50rpx"></text>
      </template>
    </uni-nav-bar>

    <!-- 内容 -->
    <swiper
      :duration="200"
      :current="tag"
      easing-function="easeInOutCubic"
      @change="swiperTab"
      :style="'height:' + height + 'px'"
    >
      <swiper-item>
        <template v-if="newList.length > 0">
          <scroll-view
            :scroll-y="true"
            :style="'height:' + height + 'px'"
            @scrolltolower="loading()"
          >
            <block v-for="(item, index) in newList" :key="index">
              <userListVue
                @doSupport="doSupport"
                :item="item"
                :index="index"
              ></userListVue>

              <view class="divBg"> </view>
              <view class="loading" v-if="loadingbuttom">
                {{ loadingbuttom }}
              </view>
            </block>
          </scroll-view>
        </template>
        <template v-else> <noDate></noDate> </template>
      </swiper-item>

      <swiper-item>
        <!-- 热门话题 -->
        <scroll-view :scroll-y="true" :style="'height:' + height + 'px'">
          <view class="toppic" @click="goToPic">
            <view class="hotTop">
              <text class="font-md">热门分类</text>
              <text class="color-gray"
                >更多<text class="iconfont icon-jinru"></text>
              </text>
            </view>
            <view class="hotList">
              <text
                class="hotitem"
                v-for="(item, index) in hotList"
                :key="index"
              >
                {{ item }}
              </text>
            </view>
          </view>
          <view class="tp-search">
            <view class="" @click="gotoSearch">
              <text class="iconfont icon-sousuo" style="margin-right: 20rpx">
              </text>
              搜索话题
            </view>
          </view>
          <!-- banner -->
          <view class="banner">
            <swiper
              :indicator-dots="true"
              :autoplay="true"
              :interval="3000"
              :duration="1000"
              easing-function="easeInOutCubic"
              indicator-active-color="#ffffff"
            >
              <swiper-item v-for="(item, index) in banner" :key="index">
                <image
                  :src="item"
                  mode="widthFix"
                  lazy-load="true"
                  style="min-height: 300rpx; width: 100%; border-radius: 8rpx"
                >
                </image>
              </swiper-item>
            </swiper>
          </view>
          <view class="divBg"> </view>

          <!-- newtoppic最新话题 -->
          <view class="newTopPic">
            <view class="font-lg" style="margin-top: 33rpx"> 最新更新 </view>
            <topicListVue :topPicList="topPicList"></topicListVue>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import userListVue from "@/components/common/user-list.vue";
import topicListVue from "../../components/common/topicList.vue";
import { followpost } from "@/api/api";
import noDate from "@/components/common/noDate.vue";
export default {
  components: {
    userListVue,
    topicListVue,
    noDate,
  },
  data() {
    return {
      // 热门分类
      hotList: ["关注", "推荐", "体育", "热点", "财经", "娱乐"],
      height: 600, //屏幕中间的高度
      tag: 0, //区分关注还是话题
      top: ["关注", "话题"],
      newList: [], //关注列表 假数据
      loadingbuttom: "", // 显示底部的加载中还是加载完成
      num: 0, //看看是否还有假数据
      banner: [
        "../../static/demo/banner1.jpg",
        "../../static/demo/banner2.jpg",
        "../../static/demo/banner3.jpg",
      ],
      topPicList: [], //话题列表
      page: 1,
    };
  },
  onShow() {
    this.getDate();
  },
  onReady() {
    this.getDate();
  },
  mounted() {
    this.getDate();
    uni.$on("updateFollowOrSupport", (e) => {
      switch (e.type) {
        case "follow": // 关注
          this.follow(e.user_id);
          break;
        case "support": // 顶踩
          this.doSupport(e.data);
          break;
      }
    });
  },

  methods: {
    // 点击旁边按钮
    toaddinput() {
      uni.navigateTo({
        url: "../add-input/add-input",
      });
    },
    // 跳转到搜索页面
    gotoSearch() {
      uni.navigateTo({
        url: "../search/search?type=topic",
      });
    },
    //   进入话题
    goToPic() {
      // console.log("进话题");
      uni.navigateTo({
        url: "../topic-classify/topic-classify",
      });
    },
    // 左右滑动的时候
    swiperTab(e) {
      this.tag = e.detail.current;
      this.scrollinto = "tab" + e.detail.current;
    },
    // 点击头部切换
    tabClick(index) {
      this.tag = index;
    },

    // 获取文章数据
    async getDate() {
      let res = await followpost(this.page);

      // console.log(res);
      if (res.list.length < 10) {
        // this.loadingbuttom = "加载完成";
      } else {
        // this.loadingbuttom = "加载中";
      }
      let list = res.list.map((item) => {
        return {
          userpic: item.user.userpic,
          id: item.id,
          user_id: item.user_id,
          title: item.title,
          username: item.user.username,
          newstime: item.create_time,
          isFollow: item.user.fens.length,
          support: {
            type:
              item.support.length > 0
                ? item.support[0].type === 0
                  ? "support"
                  : "unsupport"
                : "",
            support_count: item.ding_count,
            unsupport_count: item.cai_count,
          },
          comment_count: item.comment_count,
          share_num: item.sharenum,
          titlepic: item.titlepic,
        };
      });
      this.newList = this.page === 1 ? list : [...this.newList, ...list];
    },
    // 上拉加载
    loading(index) {
      // this.loadingbuttom = "加载中";
      this.page++;
      this.getDate();
    },
    // 点赞
    doSupport(type) {
      // console.log(type);
      this.newList.forEach((item) => {
        // console.log(item);
        if (item.id === type.id) {
          // 之前没有操作过
          if (item.support.type === "") {
            item.support[type.type + "_count"]++;
          } else if (
            item.support.type === "support" &&
            type.type === "unsupport"
          ) {
            // console.log("顶", item.support.support_count);
            // 顶 - 1
            item.support.support_count--;
            // 踩 + 1
            item.support.unsupport_count++;
          } else if (
            item.support.type === "unsupport" &&
            type.type === "support"
          ) {
            // 之前踩了
            // 顶 + 1
            // console.log("不执行", item.support.support_count);
            if (item.support.support_count === -1) {
              item.support.support_count = 0;
            }
            item.support.support_count++;
            // 踩 - 1
            item.support.unsupport_count--;
          }
          item.support.type = type.type;
        }
      });
    },
    // 获取热门的数据
    getNewTopPic() {
      uni.request({
        url: "https://ceshi2.dishait.cn/api/v1/hottopic",
        success: (success) => {
          if (success.statusCode === 200) {
            // console.log(success.data.data.list);
            this.topPicList = success.data.data.list;
          }
        },
      });
    },
  },

  onLoad() {
    this.getDate();
    this.getNewTopPic();
    // 获取一下屏幕的高度 然后转成rpx 在api 设备信息中获取 uni.getSystemInfo(OBJECT)
    uni.getSystemInfo({
      success: (res) => {
        // console.log(res.statusBarHeight);
        // console.log("可使用", res.windowHeight);
        this.height = res.windowHeight - res.statusBarHeight - 44;
      },
    });
  },
};
</script>

<style lang="less">
@bgcolor: #f1f1f1;
.top {
  width: 100%;
  text-align: center;
  line-height: 44px;
  text {
    display: inline-block;
    margin-left: 10px;
  }
}
.hotTop {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.toppic {
  padding: 0 22rpx;
  border-bottom-width: 0.5px;
  border-bottom-style: solid;
  border-bottom-color: #dee2e6;
}
.hotList {
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hotitem {
  border: 1px solid #e7e6e2;
  background-color: @bgcolor;
  padding: 9rpx 19rpx;
  color: #292927;
  border-radius: 10rpx;
}
.tp-search {
  view {
    // width: 100%;
    background-color: @bgcolor;
    height: 90rpx;
    margin: 20px 0;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b5a55;
  }
}
.banner,
.tp-search,
.newTopPic {
  padding: 0 22rpx;
}
.banner {
  padding-bottom: 20rpx;
}
</style>
